<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="org.apache.commons.lang.StringUtils"%>
<%
	String symbol = StringUtils.defaultIfEmpty(request.getParameter("symbol"), "EURUSD");
    String trend = StringUtils.defaultIfEmpty(request.getParameter("trend"), "");

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1 maximum-scale=1" />
		<title>FxSignal</title>
		<link rel="Stylesheet" type="text/css" href="/css/mobile.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script language="javascript" type="text/javascript" src="/js/jquery-1.6.4.js"></script>   
	    <script language="javascript" type="text/javascript" src="/js/jquery.mobile-1.0rc1.min.js"></script>
	    
	    <script language="javascript" type="text/javascript" src="/js/klass.min.js"></script>
	    <script language="javascript" type="text/javascript" src="/js/code.photoswipe.jquery-3.0.0.js"></script>
	    <script language="javascript" type="text/javascript" src="/js/jquery.cookie.js"></script>
	    <script language="javascript" type="text/javascript" src="/js/ryland.geolocation.js"></script>
		<script type="text/javascript">
		$(function() {

			$.getJSON('/fx/chart/<%=symbol%>', function(data) {
				data = data.rows;
				window.chart = new Highcharts.StockChart({
					chart : {
						renderTo : 'container'
					},
					rangeSelector : {
						selected : 0.00001
					},
					title : {
						text : '[<%=symbol%>] Trend : <%=trend%>'
					},
					series : [{
						name : 'FxSignal',
						data : data,
						tooltip: {
							valueDecimals: 5
						}
					}]
				});
			});
		});

		</script>
	</head>
	<body class="" data-theme="c">
	    <div  id="chart" data-role="page">
	        <div data-role="header" data-backbtn="false">
	            <a href='#' class='ui-btn-left ui-btn-back' data-icon='arrow-l'>Back</a>
			    <h1 id="title2"><%=symbol %></h1>
	            <a href="/" class="ui-btn-right jqm-home" data-ajax="false">Home</a>
		    </div>
			<!-- // END header -->    
			<div data-role="content">
				<div data-role="controlgroup" data-type="horizontal">
					<a class="current" data-ajax="false" data-role="button" href="/mhtml/chart.jsp?symbol=<%=symbol%>&trend=<%=trend%>">Chart</a>
					<a data-ajax="false" data-role="button" href="/mhtml/detail.jsp?symbol=<%=symbol%>&trend=<%=trend%>">Detail</a>
					
					<a id="stopTrading" data-ajax="false" data-role="button" href="">STOP</a>
					<a id="startTrading" data-ajax="false" data-role="button" href="">START</a>
				</div>
			</div>
	
			<script src="/js/highstock.js"></script>
			<script src="/js/modules/exporting.js"></script>
	        <div id="container" style="width:auto;height:450px;" ></div>
		</div>
		<script language="javascript" type="text/javascript">
		$('#stopTrading').live('click', function () {
			$("#subFrame").attr("src", "http://fxsignal.codns.com:8080/fx/addCmd/<%=symbol%>/STOP/CLOSE");
		});
		$('#startTrading').live('click', function () {
			$("#subFrame").attr("src", "http://fxsignal.codns.com:8080/fx/addCmd/<%=symbol%>/START/OPEN");
		});
		</script>
		<iframe id="subFrame" width="0" height="0" frameborder="0" ></iframe>
	</body>
</html>

